<template>
    <div class="test_left">
        <div class="test_top">
            <div class="test_title">
                环境检测
            </div>
            <div class="test_weather">
                <!-- 上 -->
                <div class="today_tem">
                    <div class="today">{{ data ? data.tem : '' }}℃</div>
                    <div class="min_max">
                        <div class="min_max_top">
                            {{ data ? data.wea : "" }}
                            <span>{{ data ? data.air : "" }}{{ data ? data.air_level : "" }}</span>
                        </div>
                        <div class="min_max_bottom">{{ data ? data.tem2 : '' }}~℃{{ data ? data.tem1 : '' }}</div>
                    </div>
                    <div class="yujing">
                        <div class="circle"></div>
                        <div class="tip">
                            {{ data ? data.air_tips : '' }}
                        </div>
                    </div>
                </div>
                <!-- 中 -->
                <div class="test_today">
                    <div class="tigan">
                        <div>
                            <i class="iconfont icon-tigan"></i>
                            <span>体感</span>
                        </div>
                        <span>{{ data ? data.tem : '' }}℃</span>
                    </div>
                    <div class="fengli">
                        <div>
                            <i class="iconfont icon-fengli"></i>
                            <span>风力</span>
                        </div>
                        <span>{{ data ? data.win_speed : '' }}</span>
                    </div>
                    <div class="shidu">
                        <div>
                            <i class="iconfont icon-shidu"></i>
                            <span>湿度</span>
                        </div>
                        <span>{{ data ? data.humidity : '' }}</span>
                    </div>
                </div>
                <!-- 下 -->
                <div class="today_tomorrow">
                    <div class="today_weather">
                        <div class="today_weather_top">
                            <span>{{ data ? data.tem2 : '' }}~{{ data ? data.tem1 : '' }}℃</span>
                            <i class="iconfont icon-yeqing"></i>
                        </div>
                        <div class="today_weather_bottom">
                            <span>今天</span>
                            <span class="today_piece">{{ data ? data.air : "" }}{{ data ? data.air_level : "" }}</span>
                            <span>{{ data ? data.wea : "" }}</span>
                        </div>
                    </div>
                    <div class="tt_line"></div>
                    <div class="tomorrow_weather">
                        <div class="today_weather_top">
                            <span>{{ data ? data.tem2 : '' }}~{{ data ? data.tem1 : '' }}℃</span>
                            <i class="iconfont icon-qing"></i>
                        </div>
                        <div class="today_weather_bottom">
                            <span>明天</span>
                            <span class="today_piece">{{ data ? data.air : "" }}{{ data ? data.air_level : "" }}</span>
                            <span>{{ data ? data.wea : "" }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="test_bottom">
            <div class="test_title">
                学生分布情况
            </div>
            <div class="bottom_charts" ref="chart"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import { getWeather } from '../../../api/index';
import './left.css'

const data = ref({});
const option = ref({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Email', '广告', '视频', 'Direct', '搜索'],
        icon: 'circle',
        textStyle: {
            color: "#fff"
        }
    },
    grid: {
        left: '1%',
        right: '7%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
            smooth: true
        },
        {
            name: '广告',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
            smooth: true
        },
        {
            name: '视频',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
            smooth: true
        },
        {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320],
            smooth: true
        },
        {
            name: '搜索',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 290, 330, 320],
            smooth: true
        }
    ]
});

getWeather({
    unescape: 1,
    version: "v63",
    appid: "86419812",
    appsecret: "TWFk7GdY"
}).then(res => {
    // console.log(res.data);
    data.value = res.data;
})

const chart = ref(null);
const ws = new WebSocket("ws://localhost:3002/bigscreen/websockets?id=10086");

const xdata = () => {
    let kk = [];
    let time = +new Date();
    for (let i = 0; i < 7; i++) {
        kk.unshift(dayjs(time).format('HH:mm:ss'))
        time -= 2 * 60 * 1000
    }
    option.value.xAxis.data = kk;
}

onMounted(() => {
    ws.onmessage = (e) => {
        let res = JSON.parse(e.data);

        const myCart = echarts.init(chart.value);
        option.value.legend.data = res.legendData;
        option.value.series = res.legendData.map((item, index) => {
            return {
                data: res.seriesData[index],
                name: item,
                type: 'line',
                stack: 'Total',
                smooth: true,
                symbol: 'none'
            }
        });
        xdata();
        myCart.setOption(option.value);
    }

    window.addEventListener('resize', () => {
        if (chart.value) echarts.getInstanceByDom(chart.value).resize();
    })
})

</script>

<style></style>